<template>
  <div class="app-container">
    <el-form ref="addCourse" :model="addCourse" :rules ="rules" label-width="120px">
      <el-form-item label="课程名称 " prop= "courseId">
        <el-select v-model="addCourse.courseId" clearable filterable placeholder="请选择">
              <el-option
                v-for="item in courseOptions"
                :key="item.courseId"
                :label="item.courseName"
                :value="item.courseId">
              </el-option>
          </el-select>
      </el-form-item>
      <el-input v-model="addCourse.userId" type="hidden"/>

        <el-form-item label="课程性质" prop= "courseNatureId">
            <el-select v-model="addCourse.courseNatureId" clearable filterable placeholder="请选择">
                <el-option
                  v-for="item in courseNatureOptions"
                  :key="item.courseNatureId"
                  :label="item.courseNatureName"
                  :value="item.courseNatureId">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="开课系别-专业" prop ="deptAndmajorId" required>
          <el-cascader 
            
            v-model="addCourse.deptAndmajorId"
            @change="handleChange"
            :options="deptMajorOptions" 
            :props="{value:'value', label: 'name', children: 'majorList'}"
            filterable
            clearable
          ></el-cascader>
        </el-form-item>
      
      
      <el-form-item label="开课年份" prop= "year">
        <el-col :span="5">
          <el-date-picker
            v-model="addCourse.year"
            type="year"
            placeholder="选择课程年份"
            format="yyyy 年"
            value-format="yyyy"
          >
          </el-date-picker>
        </el-col>

        <el-col :span="0.1" class="line">-</el-col>

        <el-col :span="5">
          <el-form-item label="学期"  prop= "season">
            <el-select v-model="addCourse.season" clearable placeholder="学期">
              <el-option label="春季学期" value="春季学期" />
              <el-option label="秋季学期" value="秋季学期" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-form-item>


      <el-form-item label="最大人数" prop= "maxNum">
        <el-input v-model="addCourse.maxNum" /> 
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
import { addCourse} from '@/api/teacher/'
import { getdeptMajor,getCourse, getCourseNature} from '@/api/component/'
export default {
  created() {
    getdeptMajor().then(response => {
      this.deptMajorOptions = response.data.items;
    })
    getCourse().then(response => {
      this.courseOptions = response.data.items;
    })
    getCourseNature().then(response => {
      this.courseNatureOptions = response.data.items;
    })
  },
  data() {
    return {
      addCourse: {
        courseId: '',
        userId:'',
        deptId:'',
        majorId:'',
        deptAndmajorId:[],
        courseNatureId:'',
        year:'',
        season:'',
        term:'',
        maxNum:'',
      },
      rules:{
        courseId :[{required: true, message: '请输入课程名', trigger: 'change'}],
        courseNatureId :[{required: true, message: '请选择课程性质', trigger: 'change'}],
        deptId :[{required: true, message: '请选择开课系别', trigger: 'change'}],
        season :[{required: true, message: '请选择开课学期', trigger: 'change'}],
        year :[{required: true, message: '请选择开课学年', trigger: 'change'}],
        maxNum :[{required: true, message: '请输入最大选课人数', trigger: 'blur'}]
      },
      deptOptions: null,
      deptMajorOptions: null,
      courseOptions: null,
      courseNatureOptions: null,
    }
  },
  
  methods: {
   
   onSubmit() {
     this.addCourse.term = this.addCourse.year+'-'+this.addCourse.season
     this.addCourse.userId = this.$store.state.user.userId
      this.$refs.addCourse.validate(valid => {
        if (valid) {
          addCourse(this.addCourse).then(() => {
            this.$message({
              message: '添加成功',
              type: 'success'
            })
          })
        } else {
          this.$message({
            message: '表单填写错误,请检查',
            type: 'warning'
          });
          this.$refs.addCourse.resetFields();
        }
      })
      
    },handleChange(itemIdArr){
      this.addCourse.deptId = itemIdArr[itemIdArr.length-2]
      this.addCourse.majorId = itemIdArr[itemIdArr.length-1]
    },
    
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
</style>

